<template>
  <el-dialog
    title="查看私信"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    width="1000px"
  >
    <div class="newsDetail">
      <p class="msgtitle">{{ row.title }}</p>
      <p class="title-detail">
        <span>{{ flag == '1' ? '发送人' : '收件人' }}：{{ row.userName }}</span>
        <span>时间：{{ row.updateTime }}</span>
      </p>
      <div class="text" v-html="row.content"> </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      row: {},
      flag: false,
    }
  },
  mounted() {
    this.$bus.$on('showMessageInfo', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showMessageInfo')
  },
  methods: {
    init(row) {
      this.flag = row.hasOwnProperty('sysUser')
      let userName = this.flag
        ? row.sendUser.userName
        : row.receiveUserList.map((v) => v.userName).toString()
      this.row = row
      this.$set(this.row, 'userName', userName)
      this.dialogVisible = true
    },
  },
}
</script>
<style scoped lang="scss">
.newsDetail {
  .msgtitle {
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    color: #a7201f;
  }
  .subTitle {
    text-align: center;
    font-size: 16px;
    padding: 15px 0;
  }
  .title-detail {
    text-align: center;
    span {
      display: inline-block;
      padding-right: 30px;
      color: #909399;
      font-size: 12px;
    }
    border-bottom: 1px dashed #ddd;
    margin: 0px 25px;
    padding-bottom: 10px;
  }
  .text {
    padding: 20px;
    text-indent: 2em;
    min-height: 200px;
  }
}
</style>